<template>
  <a-modal
    title="收支信息"
    :width="800"
    :visible="visible"
    :confirmLoading="loading"
    @ok="() => { $emit('ok') }"
    @cancel="() => { $emit('cancel') }"
  >
    <a-spin :spinning="loading">
      <a-form :form="form" v-bind="formLayout">
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="甲方经办人">
              <a-input placeholder="请输入甲方经办人" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="经办人">
              <a-input placeholder="请输入我方经办人" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="预付款阶段">
              <a-select
                v-decorator="['payMoment',{ rules: [{ required: true, message: '请选择预付款阶段' }] }]"
                mode="tags"
                placeholder="请选择款项">
                <a-select-option value="预付款">预付款</a-select-option>
                <a-select-option value="第二笔">第二笔</a-select-option>
                <a-select-option value="第三笔">第三笔</a-select-option>
                <a-select-option value="第四笔">第四笔</a-select-option>
                <a-select-option value="第五笔">第五笔</a-select-option>
                <a-select-option value="验收款">验收款</a-select-option>
                <a-select-option value="审计款">审计款</a-select-option>
                <a-select-option value="尾款">尾款</a-select-option>
                <a-select-option value="质保金">质保金</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="付款条件">
              <a-input placeholder="请输入付款条件" v-decorator="['payCondition']" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="付款比例">
              <a-input placeholder="请输入付款比例" v-decorator="['payRatio']" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="金额">
              <a-input placeholder="请输入金额" v-decorator="['amount',{ rules: [{ required: true, message: '请输入金额' }] }]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="合同名">
              <a-input :disabled="true" v-decorator="['contractName',{ rules: [{ required: true, message: '请选择合同' }] }]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="开户行">
              <a-input placeholder="请输入开户行" v-decorator="['bankName']" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="开户名">
              <a-input placeholder="请输入开户名" v-decorator="['bankAccountName']" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="开户账号卡号">
              <a-input placeholder="请输入开户账号卡号" v-decorator="['bankAccount']" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="备注">
              <a-input placeholder="请输入备注" v-decorator="['note']" />
            </a-form-item>
          </a-col>
          <a-col :span="12" v-if="!isEdit">
            <a-form-item label="附件上传">
              <a-upload-dragger
                name="file"
                :multiple="true"
                action="#"
                :file-list="fileList"
                :custom-request="uploadFile"
                @change="handleChange">
                <p class="ant-upload-drag-icon">
                  <a-icon type="inbox" />
                </p>
                <p class="ant-upload-text">
                  点击或拖拽文件上传
                </p>
              </a-upload-dragger>
            </a-form-item>
          </a-col>
          <a-form-item label="附件ID" v-if="!isEdit" v-show="false">
            <a-input
              v-decorator="['fileIds']" />
          </a-form-item>
        </a-row>

      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'
import { saveFile } from '@/api/manage'
// 表单字段
const fields = ['id', 'brand', 'productName', 'note']

export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    isEdit: {
      type: Boolean,
      required: true
    }
  },
  data () {
    this.formLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 }
      }
    }
    return {
      form: this.$form.createForm(this),
      fileList: []
    }
  },
  methods: {
    handleChange ({ fileList }) {
      this.fileList = fileList
    },
    resetFileList () {
      this.fileList = []
    },
    uploadFile (e) {
      const param = new FormData()
      param.append('file', e.file)
      saveFile(param)
        .then(res => {
          e.onSuccess({ uid: e.file.uid, name: res.data.fileName, status: 'done', url: res.data.fileUrl, fileId: res.data.fileId }, e)
          // 提交时只去状态是done的文件
          if (this.fileList) {
            const fileList = this.fileList.filter((item) => item.status === 'done')
            if (fileList) {
              const fileIds = []
              for (const item of fileList) {
                fileIds.push(item.response.fileId)
              }
              this.form.setFieldsValue({ fileIds: fileIds.join(',') })
            }
          }
        }).catch(() => e.onError({ status: 'error', url: '' }, e)
      )
    }
  },
  created () {
    console.log('')

    // 防止表单未注册
    fields.forEach(v => this.form.getFieldDecorator(v))

    // 当 model 发生改变时，为表单设置值
    this.$watch('model', () => {
      this.model && this.form.setFieldsValue(pick(this.model, fields))
    })
  }
}
</script>
